<template>
		<div style="width: 100%;height:100%" ref="echartsBox">
			<v-chart ref="echarts" class="chart" :option="option" :key="key" />
		</div>
</template>

<script>
	import { config } from './data.js'
	console.log(config)

	export default {
		name: 'LineSimpleContrast',
		props: {
			lineSimpleContrastForm: {
			},
			barOptions: {
				type: Object,
        default: () => {
					return config
				}
      }
		},
		watch: {
			barOptions: {
				handler(val) {
					console.log('barOptions', val)
					this.option = val
				},
				deep: true,
				immediate: true
			}
		},
    data(){
			return {
				option: {},
				key: 1
      }
    },
		mounted() {
			let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
			let element = this.$refs['echartsBox']
			this.observer = new MutationObserver((mutationList) => {
				for (let mutation of mutationList) {
					console.log(mutation)
				}
				console.log('自适应')
				console.log(this)

				// this.$refs['echarts'].resize()
				this.key+=1
			})
			this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
		},
		beforeDestroyed () {
			if (this.observer) {
				this.observer.disconnect()
				this.observer.takeRecords()
				this.observer = null
			}
		}
	}
</script>
<style lang="scss" scoped>
.chartBox{
	height: auto;
	overflow: hidden;
	// padding-top: 32px !important ;
	position: relative;
}
.sum{
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	padding: 0 10px;
	height: 30px;
	z-index: 1;
	.sumLeft{
		float: left;
		.sumLeft-title{
			color: rgb(90, 38, 38);
			font-weight: bold;
			font-family: DIN, Arial, sans-serif;
			font-size: 25px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.sumLeft-percentage{
			color: rgb(55, 253, 163);
			font-weight: bold;
			font-family: DIN, Arial, sans-serif;
			font-size: 6px;
			margin: 0 10px;
		}
		.sumLeft-tip{
			color: rgb(118, 118, 118);
			font-weight: bold;
			font-family: DIN, Arial, sans-serif;
			font-size: 6px;
		}
	}
	.sumRight{
		float: right;
		color: rgb(118, 118, 118);
    font-weight: bold;
    font-family: DIN, Arial, sans-serif;
    font-size: 15px;
	}
}
.chartTitle{
	width: 100%;
	height: 32px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: rgb(204, 204, 204);
	font-weight: bold;
	font-family: "Microsoft Yahei", Arial, sans-serif;
	font-size: 18px;
	writing-mode: horizontal-tb;
	letter-spacing: 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
</style>